<template>
  <div>
<span>
  <el-table :data="tableData">
    <el-table-column prop="nickName" label="名称"></el-table-column>
<!--    <el-table-column label="头像">-->
<!--       <template slot-scope="scope">-->
<!--          <img :src="scope.row.avatarUrl" class="el-avatar">-->
<!--        </template>-->
<!--    </el-table-column>-->
    <el-table-column prop="gender" label="性别"></el-table-column>
    <el-table-column prop="language" label="语言"></el-table-column>
    <el-table-column prop="city" label="城市"></el-table-column>
    <el-table-column prop="salary" label="省份"></el-table-column>
    <el-table-column prop="createTime" label="createTime"></el-table-column>
    <el-table-column fixed="right" header-align="center" align="center" width="240" label="操作">
      <template slot-scope="scope">
        <el-row>
          <el-button icon="el-icon-edit" @click="dialogVisible = true">修改</el-button>
          <el-button icon="el-icon-delete" type="danger" @click="handleDelete(scope.row)" round>删除</el-button>
        </el-row>
      </template>
    </el-table-column>

    <!-- <el-table-column prop="date" label="日期" width="140"></el-table-column> -->
  </el-table>
  <div align="left">
  <el-pagination
    background
    layout="prev, pager, next"
    :total="100">
    </el-pagination>
    </div>
  </span>
  <span style="text-align: center">  <!-- Form -->


<el-dialog title="修改" :visible.sync="dialogVisible">
 <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="姓名">
    <el-input v-model="form.name" style="width: 80%"></el-input>
  </el-form-item>
  <el-form-item label="性别">
    <el-select v-model="form.region" placeholder="请选择性别">
      <el-option label="男" value="shanghai"></el-option>
      <el-option label="女" value="beijing"></el-option>
    </el-select>
  </el-form-item>
   <el-form-item label="城市">
    <el-input v-model="form.re"></el-input>
  </el-form-item>
   <el-form-item label="薪资">
    <el-input v-model="form.sarlqr"></el-input>
  </el-form-item>
  <el-form-item label="活动时间">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>

  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="onSubmit">添加</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</el-dialog></span>

  </div>

</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          field: "nickName",
          title: "名称",
          miniwidth: 100
        },
        // {
        //   field: "avatarUrl",
        //   title: "图片",
        //   image: 1
        // },
        {
          field: "gender",
          title: "性别",
          width: 100
        },
        {
          field: "language",
          title: "语言",
          width: 100
        },
        {
          field: "city",
          title: "城市",
          width: 100
        },
        {
          field: "salary",
          title: "省份",
          width: 140
        },
        {
          field: "country",
          title: "国家",
          width: 100
        },
        {
          field: "createTime",
          title: "创建时间",
          width: 160
        },
        {
          fixed: "right",
          title: "操作",
          width: 200,
          align: "center",
          toolbar: "#table-miniUser-list"
        }
      ],

      tableData: [],
      dialogVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
    };
  },
  methods: {
    handlerMiniUser: function() {
      this.$api.miniuser.miniUserListPage().then(res => {
        this.tableData = res.data;
      });
    },

    // 删除
    handleDelete(tableData) {
      this.$confirm("确认删除选中记录吗？", "提示", {
        type: "warning"
      }).then(() => {
        let params = this.getminiUserId([], tableData);
        this.$api.menu.batchDelete(params).then(res => {
          this.findTreeData();
          this.$message({ message: "删除成功", type: "success" });
        });
      });
    },


  },
  mounted() {
    this.handlerMiniUser();
  }
};
</script>

<style scoped lang="scss">
</style>
